<script setup>
import { ref } from 'vue'
import useAuthStore from '@/store/auth'
import api from '@/api'
import CourseList from './CourseList.vue'
import { useRoute, useRouter } from 'vue-router'

const $router = useRouter()
const $route = useRoute()
const keyword = ref('')
const $authStore = useAuthStore()
const banners = ref([])
const collections = ref([])
const courses = ref([])

const onSearch = () => {
  $router.replace(`/search/${keyword.value}`)
}

const getBanners = async () => {
  const res = await api.get('/banners')
  banners.value = res.data
}

const getCollections = async () => {
  collections.value = await api.get('/collections')
}

const getCourses = async () => {
  courses.value = await api.get('/courses')
}

const toDetails = (item) => {
  switch (item.type) {
    case 1:
      // 文案
      $router.replace(`/articleDetails/${item.id}`)
      break
    case 2:
      // 链接
      window.open(item.content)
      break
    case 3:
      // 课程
      $router.replace(`/courses/${item.id}`)
      break
  }
}

getBanners()
getCollections()
getCourses()
</script>

<template>
  <div class="container">
    <div class="header">
      <div class="top">
        <div class="logo"
             v-if="$authStore.company.logo"><img :src="$authStore.company.logo" /></div>
        <van-search class="search"
                    v-model="keyword"
                    @search="onSearch"
                    shape="round"
                    placeholder="搜索课程" />
      </div>

      <div class="swipe-wrap">
        <van-swipe class="swipe"
                   :autoplay="3000"
                   indicator-color="white">
          <van-swipe-item v-for="(item,index) in banners"
                          @click="toDetails(item)"
                          :key="index">
            <img :src="item.banner" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>

    <div class="collections">
      <div class="collection"
           v-for="(item,index) in collections"
           @click="$router.replace(`/collections/${item.id}`)"
           :key="index">
        <div class="image">
          <img :src="item.image" />
        </div>
        <div class="label">{{ item.name }}</div>
      </div>
    </div>

    <div class="list-header">
      <img src="@/assets/img/hot.png" />
      <div class="title">热门课程</div>
    </div>

    <CourseList :courses="courses"></CourseList>

    <van-empty v-if="!courses.length"
               description="暂无课程" />
  </div>
</template>

<style lang="scss" scoped>
.container {
  background: #f9f9f9;
}
.header {
  background-image: linear-gradient(360deg, #f9f9f9 0%, #fbebe5 100%);

  .top {
    display: flex;
    align-items: center;
    padding: 2.2vw 3.2vw;

    .logo {
      width: 22.4vw;
      height: 8vw;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        display: block;
        max-width: 100%;
        max-height: 100%;
      }
    }

    .search {
      background: none;
      flex: 1;
      margin-left: 6.4vw;
      padding: 0;
    }
  }

  .swipe-wrap {
    padding: 0 3.2vw 3.2vw 3.2vw;

    .swipe {
      overflow: hidden;
      border-radius: 10px;
      background-color: #000;
    }
    img {
      display: block;
      width: 100%;
      height: 196px;
      object-fit: contain;
    }
  }
}

.collections {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  margin: 0 3.2vw;
  border-radius: 10px;
  .collection {
    margin: 3.75vw;

    .image {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 11.2vw;
      height: 11.2vw;
      img {
        display: block;
        max-width: 100%;
        max-height: 100%;
      }
    }

    .label {
      margin-top: 6px;
      width: 11.2vw;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      line-height: 1;
      font-size: 3vw;
      font-family: PingFangSC-Regular;
      color: rgba(0, 0, 0, 0.7);
      letter-spacing: 0;
      text-align: center;
      font-weight: 400;
    }
  }
}

.list-header {
  display: flex;
  align-items: center;
  padding: 5.2vw 3.2vw 0 3.2vw;
  img {
    display: block;
    width: 7.5vw;
  }

  .title {
    font-family: PingFangSC-Medium;
    font-size: 4.25vw;
    color: rgba(0, 0, 0, 0.9);
    letter-spacing: 0;
    font-weight: 500;
    margin-left: 1vw;
  }
}
</style>
